4 Replies - 807 Views - Last Post: 02 August 2011 - 02:28 AM

#1 codexacc  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 10
  • Joined: 29-July 11

CSS Horizontal Menu Help

Posted 29 July 2011 - 06:08 AM

Hi,
I am trying to get my head around CSS and it's all going well so far but I'm trying to replicate a CSS horizontal menu like the one seen here: www.naea.co.uk

Their CSS code is all on one line and hard to read but I've styled what I've found:
.ui-menu{
list-style:none;
padding:2px;
margin:0;
display:block;
float:left
}

.ui-menu .ui-menu{
margin-top:-3px
}

.ui-menu .ui-menu-item{
margin:0;
padding:0;
zoom:1;float:
left;clear:
left;width:100%
}

.ui-menu .ui-menu-item a{
text-decoration:none;
display:block;
padding:.2em .4em;
line-height:1.5;
zoom:1
}

.ui-menu .ui-menu-item a.ui-state-hover,.ui-menu .ui-menu-item a.ui-state-active{
font-weight:normal;
margin:-1px
}



Can anybody just explain this to me and how I get the multi-level two-column layout, and if possible how to replicate this?

Thanks in advance

Codexacc

Is This A Good Question/Topic? 0
  • +

Replies To: CSS Horizontal Menu Help

#2 Dilerious  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 2
  • View blog
  • Posts: 280
  • Joined: 30-December 05

Re: CSS Horizontal Menu Help

Posted 30 July 2011 - 12:38 AM

Ok for the horizontal nav menu, a while back I had a little problem with doing this. But basically I put my navigation links in a list in HTML, with a wrapper around it positioning it on my page.

<ul>

<li><a href="Index.html">Home</a></li>
<li><a href="Services.html">Services</a></li>
<li><a href="Team.html">Meet the Team</a></li>
<li><a href="Contact.html">Contact Us</a></li>

</ul>




As for the CSS, you have a few syntax errors [if that's you're code, or the one you salvaged from the website you're trying to replicate.] For example a semi-colon is needed at the end of each statement to let the browser know it's ended.

But in the CSS, I floated the text to the left making it horizontal, and then centered the text. Ontop of that just adding any styles you like to make it look fancy.
Was This Post Helpful? 0
  • +
  • -

#3 Lemur  Icon User is offline

  • Pragmatism over Dogma
  • member icon


Reputation: 1377
  • View blog
  • Posts: 3,501
  • Joined: 28-November 09

Re: CSS Horizontal Menu Help

Posted 30 July 2011 - 07:10 AM

CSS Menu Design Basics
Was This Post Helpful? 0
  • +
  • -

#4 hiddenghost  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 39
  • View blog
  • Posts: 621
  • Joined: 15-December 09

Re: CSS Horizontal Menu Help

Posted 01 August 2011 - 09:17 PM

You might want to look at these pages.
For dropdown menus in css:
http://csswizardry.c...-dropdown-menu/
For using css selectors in groups or nesting them:
http://www.htmldog.c...diate/grouping/
Was This Post Helpful? 0
  • +
  • -

#5 glen75  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 10
  • Joined: 02-August 11

Re: CSS Horizontal Menu Help

Posted 02 August 2011 - 02:28 AM

You need the html structure like this :

<div id="ui-menu" align="left">
    <ul>
     <li><a href="goldhome.php?module=home">Home</a></li>
     <li><a href="goldhome.php?module=aboutus">About Us</a></li>
     <li><a href="goldhome.php?module=advertiser">Advertiser</a>
	  <ul>
	   <li><a href="goldhome.php?module=advfaq">Agreement</a></li>
	  </ul>
     </li>
     <li><a href="goldhome.php?module=publisher">Publisher</a>
      <ul>
	   <li><a href="goldhome.php?module=pubfaq">FAQ</a></li>
	   <li><a href="goldhome.php?module=pubagree">Agreement</a></li>
	  </ul>
     </li>
    </ul>
   </div>

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1