CSS Drop Down Menu Suggestions...

[JackT06]

Hello,

I would like to create a drop down menu, prefreblly just in CSS or using images i allready have.

Attached is my nav bar menu. I would like to create a down down menu on the "Doing DofE" link.

Could someone give me a hand please...?

If you think i'm being rude by asking someone to help me out, than please just ignore this thread and move on.

 

[celticpride678]

Here is the HTML structure:

<li><a href="LINK TO DOCUMENTS">Documents</a></li>
<li id=""><a href="#">Doing DofE</a>
<ul class="children" id="">
<li><a href="LINK TO WHAT YOU WANT IN DROP-DOWN">Text</a></li>
</ul>
</li>
<li><a href="LINK TO DOFE NEWS">DofE News</a></li>

CSS Structure (copied and pasted from my website, modify to your needs):


#nav{ letter-spacing:1px; } #nav, #nav ul { letter-spacing:1px; list-style: none; line-height: 1; } #nav a {display: block; text-decoration: none; border:none; } #nav a:hover { display: block; text-decoration: none; border:none; background:#30AAFF; color:#FFF } #nav li { background:#EEE; float: left; list-style:none; margin-right:10px} #nav a{ display:block; font-weight:600; color: #000; padding:6px 12px; } #nav a:active, .current_page_item a, #home .on { text-decoration:none } #nav li ul { position: absolute; left: -999em; height: auto; width: 174px; border-bottom: 1px solid #a9a9a9; } #nav li li { width: 172px; border-top: 1px solid #a9a9a9; border-right: 1px solid #a9a9a9; border-left: 1px solid #a9a9a9; background: #F5F5F5; } #nav li li a{ font-weight:normal; font-size:1em; color:#000; } #nav li li a:hover, #nav li li a:active { background:#bed261; } #nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { left: auto; } a.main:hover { background:none; }

 

[JackT06]

Here is the HTML structure:

<li><a href="LINK TO DOCUMENTS">Documents</a></li>
<li id=""><a href="#">Doing DofE</a>
<ul class="children" id="">
<li><a href="LINK TO WHAT YOU WANT IN DROP-DOWN">Text</a></li>
</ul>
</li>
<li><a href="LINK TO DOFE NEWS">DofE News</a></li>

CSS Structure (copied and pasted from my website, modify to your needs):


#nav{ letter-spacing:1px; } #nav, #nav ul { letter-spacing:1px; list-style: none; line-height: 1; } #nav a {display: block; text-decoration: none; border:none; } #nav a:hover { display: block; text-decoration: none; border:none; background:#30AAFF; color:#FFF } #nav li { background:#EEE; float: left; list-style:none; margin-right:10px} #nav a{ display:block; font-weight:600; color: #000; padding:6px 12px; } #nav a:active, .current_page_item a, #home .on { text-decoration:none } #nav li ul { position: absolute; left: -999em; height: auto; width: 174px; border-bottom: 1px solid #a9a9a9; } #nav li li { width: 172px; border-top: 1px solid #a9a9a9; border-right: 1px solid #a9a9a9; border-left: 1px solid #a9a9a9; background: #F5F5F5; } #nav li li a{ font-weight:normal; font-size:1em; color:#000; } #nav li li a:hover, #nav li li a:active { background:#bed261; } #nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { left: auto; } a.main:hover { background:none; }

Thanks for that! I have tried to do it on my site but not been very successfull see attached image...

<ul>
 
    <li<?php if ($pid == 'Home') { echo ' class="current_page_item"'; } ?>><a href="index.html">Home</a></li>
    <li><a href="Blog.html" <?php if ($currentPage=="Blog") echo 'class=\"current_page_item"'; ?>>Blog</a></li>
    <li><a href="Gallery.html" <?php if ($currentPage=="Gallery") echo 'class=\"current_page_item"'; ?>>Gallery</a></li>
    <li><a href="Documents.html" <?php if ($currentPage=="Documents") echo 'class=\"current_page_item"'; ?>>Documents</a></li>
    <li><a href="DoingDofE.html" <?php if ($currentPage=="DoingDofE") echo 'class=\"current_page_item"'; ?>>Doing DofE</a></li>
    <ul class="children" id="">
    <li><a href="Equipment.html">Equipment</a></li>
    </ul>
    <li><a href="DofE_News.html" <?php if ($currentPage=="DofENews") echo 'class=\"current_page_item"'; ?>>DofE News</a></li>
    <li><a href="ContactUs.html" <?php if ($currentPage=="ContactUs") echo 'class=\"current_page_item"'; ?>>Contact Us</a></li>
</ul>

I left the CSS as it was for now.

 

[celticpride678]

Thanks for that! I have tried to do it on my site but not been very successfull see attached image...

<ul>
 
    <li<?php if ($pid == 'Home') { echo ' class="current_page_item"'; } ?>><a href="index.html">Home</a></li>
    <li><a href="Blog.html" <?php if ($currentPage=="Blog") echo 'class=\"current_page_item"'; ?>>Blog</a></li>
    <li><a href="Gallery.html" <?php if ($currentPage=="Gallery") echo 'class=\"current_page_item"'; ?>>Gallery</a></li>
    <li><a href="Documents.html" <?php if ($currentPage=="Documents") echo 'class=\"current_page_item"'; ?>>Documents</a></li>
    <li><a href="DoingDofE.html" <?php if ($currentPage=="DoingDofE") echo 'class=\"current_page_item"'; ?>>Doing DofE</a></li>
    <ul class="children" id="">
    <li><a href="Equipment.html">Equipment</a></li>
    </ul>
    <li><a href="DofE_News.html" <?php if ($currentPage=="DofENews") echo 'class=\"current_page_item"'; ?>>DofE News</a></li>
    <li><a href="ContactUs.html" <?php if ($currentPage=="ContactUs") echo 'class=\"current_page_item"'; ?>>Contact Us</a></li>
</ul>

I left the CSS as it was for now.

Link to the site, please?

 

[JackT06]

www.hampshiredoeyouthforum.uphero.com

 

[Eclipse278]

<ul>

<li><a href="index.html">Home</a></li>
<li><a href="Blog.html" >Blog</a></li>
<li><a href="Gallery.html" >Gallery</a></li>
<li><a href="Documents.html" >Documents</a></li>
<li><a href="DoingDofE.html" >Doing DofE</a></li>

<ul class="children" id=""> <- erase this line
<li><a href="Equipment.html">Equipment</a></li>
</ul> <- erase this line
<li><a href="DofE_News.html" >DofE News</a></li>
<li><a href="ContactUs.html" >Contact Us</a></li>
</ul>

In your html file, try it without the <ul class="children" id=""> and also erase the closing </ul> tag that comes after the equipment list item. It seems to me like you want each thing to be an item in the list, so making a new ul subset is probably throwing it off and adding the spaces depending on your css.

 

[JackT06]

In your html file, try it without the <ul class="children" id=""> and also erase the closing </ul> tag that comes after the equipment list item. It seems to me like you want each thing to be an item in the list, so making a new ul subset is probably throwing it off and adding the spaces depending on your css.

Surely if i was to remove them two than it would go back to being the normall menu...?

 

[Dunmail]

A good, OK - very good, resource for this is Stu Nicholl's site at http://www.cssplay.co.uk/menus/

There should be plenty of options there to go at.