Overclock.net › Forums › Software, Programming and Coding › Coding and Programming › Web Coding › Pure CSS Horizontal Navigation Menu
New Posts  All Forums:Forum Nav:

Pure CSS Horizontal Navigation Menu

post #1 of 8
Thread Starter 
Hello everyone.

I have been having trouble using an unordered list and css to make a horizontal drop down menu. The main trouble comes with aligning everything horizontally and having some elements styled differently than others. An example would be that I have three main headers, but only one has a link, the rest will just provide a drop down to links when you hover over them. The main headers are also a different size and font color than the rest of the drop down elements. So the css needs to keep that in mind and keep the main headers styled the same.

Bearing this in mind, how would I style this unordered list to look like a clean horizontal drop down menu?
Code:
<ul>
                <li>Main1
                <ul>
                        <li><a href="#">Sub1</a></li>
                        <li><a href="#">Sub2</a></li>
                        <li><a href="#">Sub3</a></li>
                </ul>
                </li>
                <li class="inline"><a href="#">Main2</a></li>
                <ul>
                <li>Main3
                <ul>
                        <li><a href="#">Sub1</a></li>
                        <li><a href="#">Sub2</a></li>
                        <li><a href="#">Sub3</a></li>
                        <li><a href="#">Sub4</a></li>
                        <li><a href="#">Sub5</a></li>
                        <li><a href="#">Sub6</a></li>
                </ul>
                </ul>
                </li>
        </ul>

Thanks everyone!
Edited by |3uZZ - 11/21/11 at 7:28am
post #2 of 8
Can you post what your current CSS is so we can look at it and edit accordingly. It will also let us see what you are trying to doing with the different styling

Also, Googling gives a lot of examples on how to do this, can use these as guidelines to make yours work.
Main PC
(13 items)
 
  
CPUMotherboardGraphicsRAM
i5 2500k Asus Maximus IV Gene-Z MSI 6950 2gb Unlocked Ref GSkill Ripjaws X 8GB CL8 
Hard DriveOSMonitorKeyboard
Crucial M4 128GB Windows 7 Ult Samsung 24" ToC Das Professional Silent 
PowerCaseMouse
Seasonic X750 Corsair 650d Logitech G700 
  hide details  
Reply
Main PC
(13 items)
 
  
CPUMotherboardGraphicsRAM
i5 2500k Asus Maximus IV Gene-Z MSI 6950 2gb Unlocked Ref GSkill Ripjaws X 8GB CL8 
Hard DriveOSMonitorKeyboard
Crucial M4 128GB Windows 7 Ult Samsung 24" ToC Das Professional Silent 
PowerCaseMouse
Seasonic X750 Corsair 650d Logitech G700 
  hide details  
Reply
post #3 of 8
Horizontal Menu.zip 1k .zip file

To start with, check out html file in the attachment , wrote some quick styles to put 3 menus with drop downs. Not sure if this is what you were looking for though,
My System
(13 items)
 
  
CPUMotherboardGraphicsRAM
i5 2500k ASUS - P8Z68-V/GEN3 GTX 770 DDR3 - 8G 
Hard DriveOSMonitorPower
WD Green Win 7 x64 Dell ST2320L Corsair 750TX 
CaseMouse
Coolermaster 310 Logitech G502 
  hide details  
Reply
My System
(13 items)
 
  
CPUMotherboardGraphicsRAM
i5 2500k ASUS - P8Z68-V/GEN3 GTX 770 DDR3 - 8G 
Hard DriveOSMonitorPower
WD Green Win 7 x64 Dell ST2320L Corsair 750TX 
CaseMouse
Coolermaster 310 Logitech G502 
  hide details  
Reply
post #4 of 8
Thread Starter 
@Jon

I looked through many google links, none had specifically what I wanted.

@Nik

Thank you so much! I just need to be able to center that all under a heading. So I tried to use css margin-left:auto; margin-right:auto;. I tried using the deprecated center tag. Nothing worked except setting the left position on #ulmenu. However, this would slide it out of position on different resolution monitors... I feel centering does not work because of the float:right. However, if you get rid of the float:right to center it, it becomes a vertical navigation menu. Any ideas on centering?
Edited by |3uZZ - 11/21/11 at 12:24pm
post #5 of 8
Quote:
Originally Posted by |3uZZ View Post

@Jon
I looked through many google links, none had specifically what I wanted.
@Nik
Thank you so much! I just need to be able to center that all under a heading. So I tried to use css margin-left:auto; margin-right:auto;. I tried using the deprecated center tag. Nothing worked except setting the left position on #ulmenu. However, this would slide it out of position on different resolution monitors... I feel centering does not work because of the float:right. However, if you get rid of the float:right to center it, it becomes a vertical navigation menu. Any ideas on centering?

- Most things aren't going to be exactly what you need, that's why you modify it accordingly thumb.gif

- What are you trying to center? the whole menu? or the drop downs?
Main PC
(13 items)
 
  
CPUMotherboardGraphicsRAM
i5 2500k Asus Maximus IV Gene-Z MSI 6950 2gb Unlocked Ref GSkill Ripjaws X 8GB CL8 
Hard DriveOSMonitorKeyboard
Crucial M4 128GB Windows 7 Ult Samsung 24" ToC Das Professional Silent 
PowerCaseMouse
Seasonic X750 Corsair 650d Logitech G700 
  hide details  
Reply
Main PC
(13 items)
 
  
CPUMotherboardGraphicsRAM
i5 2500k Asus Maximus IV Gene-Z MSI 6950 2gb Unlocked Ref GSkill Ripjaws X 8GB CL8 
Hard DriveOSMonitorKeyboard
Crucial M4 128GB Windows 7 Ult Samsung 24" ToC Das Professional Silent 
PowerCaseMouse
Seasonic X750 Corsair 650d Logitech G700 
  hide details  
Reply
post #6 of 8
Thread Starter 
I just wanna figure out how to center the menu! None of the normal things I use are not working. :/
post #7 of 8
An unordered list ul tag by default takes up 100% of the available width, check by adding a border to it. that is why it won't center So you will need to give it a specific width & then provide margins.

Try changing the style to
Code:
#ulmenu{ list-type:none; list-style-type:none;overflow:hidden;border:solid red 1px; width:500px;margin-left:auto; margin-right:auto;.}
My System
(13 items)
 
  
CPUMotherboardGraphicsRAM
i5 2500k ASUS - P8Z68-V/GEN3 GTX 770 DDR3 - 8G 
Hard DriveOSMonitorPower
WD Green Win 7 x64 Dell ST2320L Corsair 750TX 
CaseMouse
Coolermaster 310 Logitech G502 
  hide details  
Reply
My System
(13 items)
 
  
CPUMotherboardGraphicsRAM
i5 2500k ASUS - P8Z68-V/GEN3 GTX 770 DDR3 - 8G 
Hard DriveOSMonitorPower
WD Green Win 7 x64 Dell ST2320L Corsair 750TX 
CaseMouse
Coolermaster 310 Logitech G502 
  hide details  
Reply
post #8 of 8
Thread Starter 
Thanks! It looks good now.
New Posts  All Forums:Forum Nav:
  Return Home
  Back to Forum: Web Coding
Overclock.net › Forums › Software, Programming and Coding › Coding and Programming › Web Coding › Pure CSS Horizontal Navigation Menu