Results 1 to 2 of 2

Thread: Customizing Dropdown

  1. #1
    Join Date
    Feb 2014

    Customizing Dropdown

    I am taken a tutorial about jQuery Dropdown menus a Lynda.com. It helped me to understand a lot. I stuck on a few CSS concepts. After finishing the tutorial I want to customize the navigation to fit what I want. Rather than use a lot of trial and error I am thinking I should take the suggestions of those more experienced with CSS than me. I like to try myself, but I find that suggestions of best practice usually work best in learning. As for where the Navigation is now I want to understand a couple of things that I am sure rely on the CSS properties. I am interested in understanding how to modify the following:

    1.	How to get the text in the navbar and dropdowns to vertically align to the center?
    2.	I used -moz-border-radius: 5px; to round the navbar so how can I get the 1st link (<li>) to use that rounding only on the left side of the 1st link to highlight it without hiding the left outside border?
    3.	How can I make each dropdown links the same vertical height of the navbar and the highlight just highlight that part?


  2. #2
    Join Date
    Dec 2012
    1. Its a matter of finding your correct selector. I would suggest using Firefox Web Developer tools they allow you to hover over elements on your webpage and edit their css in real time. In the bottom right of the corner it will even give you the selector for the current item you have selected using the tool.

    .nav_menu ul.dropmenu li ul li a.sublevel {
        text-align: center;
    2. For this you could possibly add the code
      overflow: hidden;
    or you could just us the selector :hover added to your selector to round those corners too.

    3. I'm not sure I understand your wording can't you just add the height attribute to the same css selector we used in question 1 to center all your text?

    Good Luck.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
HTML5 Development Center