CSS Menu Dropdowns

Question

I'm struggling with this CSS problem, it seems to be a simple thing but I can't seem to get it right.

My top level navigation here: http://new.leicesterymca.co.uk

looks ok until you hover over... the first dropdown looks ok... the second level dropdown seems to expand from the edge of the text and I would like it to expand from the edge of the white background box... I don't know if it's a block issue or something?

Essentially i'd like it to look like this image here:

I've made the backgrounds grey and added a little gap between the dropdown boxes so they're easier to see...

The CSS I am using is:

.header-menu { margin: 29px 0 0 0; overflow: visible; z-index: 2; white-space: nowrap;  }
.header-menu ul { list-style: none; }
.header-menu ul li { float: left; position: relative; margin:0 25px 0 0; white-space: nowrap; }
.header-menu ul li:last-child { margin: 0;}
.header-menu ul a { display: table-cell; color: #163a51; font-size: 0.9em; font-weight: bold; text-transform: uppercase; margin: 28px 0 28px 0; z-index: 1;}
.header-menu ul a:hover { color: #2f9395; }

.header-menu li > ul { display: none; position: absolute; left: 0; top: 100%; background-color: #fff; }
.header-menu li:hover > ul { display: list-item; }
.header-menu li > ul li { padding: 10px;}
.header-menu li > ul li > ul { left: 100%; top: 0px;}
.header-menu li > ul li > ul li { padding: 10px;}
.header-menu li:hover > a { color: #2f9395; }

The code I'm using to pull in the menu is:

The code that outputs is here:


    
        
            Home
            Youth & Community
                
                    Our Work
                        
                            Youth Homelessness
                                
                                    Ambition
                                
                            
                            Adult Homelessness
                            Young People with Disabilities
                            Young Offenders
                            For the Community
                            Sports & Classes
                            Theatre & Arts
                        
                    
                    About Us
                        
                            Our approach
                            Partnerships & Funders
                            Values & Aims
                            Our People
                            History
                            Visit Us
                            Jobs
                            Annual Report
                        
                    
                    Support Us
                        
                            Donate
                            Events & Challenges
                                
                                    Individual even pages
                                    Organise your own event
                                    Tips & Tools
                                
                            
                            Sponsor a House
                            Business
                            Stories
                            Hire
                            Donate Goods
                            Volunteer
                        
                    
                
            
            Theatre
                
                    What’s on?
                    Your Visit
                        
                            How to Book
                            Visit Us
                            Accessibility
                        
                    
                    Get Creative
                        
                            Introducing programme
                            Festivals
                            Exhibit
                            Volunteer
                            Blogs
                        
                    
                    Sports & Classes
                    About us
                        
                            About the Y Theatre
                            History
                            Youth & Community
                            Support Us
                            Careers
                        
                    
                
            
            Hire
                
                    Our spaces
                    Meetings & Conferences
                    Live Events
                    Weddings & Parties
                    Sports
                    Rehearsals
                    Enquire
                
            
            Blogs
            Contact

Rajesh Baskaran · Accepted Answer

You can try this code:

I've taken the reference from this: http://www.cssscript.com/create-a-multi-level-drop-down-menu-with-pure-css/

ul {
  list-style: none;
  padding: 0;
  margin: 0;
  background: #1bc2a2;
}

ul li {
  display: block;
  position: relative;
  float: left;
  background: #1bc2a2;
}

li ul { display: none; }

ul li a {
  display: block;
  padding: 1em;
  text-decoration: none;
  white-space: nowrap;
  color: #fff;
}

ul li a:hover { background: #2c3e50; }

li:hover > ul {
  display: block;
  position: absolute;
}

li:hover li { float: none; }

li:hover a { background: #1bc2a2; }

li:hover li a:hover { background: #2c3e50; }

.main-navigation li ul li { border-top: 0; }

ul ul ul {
  left: 100%;
  top: 0;
}

ul:before,
ul:after {
  content: " "; /* 1 */
  display: table; /* 2 */
}

ul:after { clear: both; }

CSS Menu Dropdowns

Answers (2)

Related Questions