2 Replies - 562 Views - Last Post: 01 August 2014 - 02:21 PM

#1 Atharron  Icon User is offline

  • D.I.C Head

Reputation: 2
  • View blog
  • Posts: 61
  • Joined: 23-April 14

weird things happening with my menu...

Posted 01 August 2014 - 02:47 AM

So, I've created this menu, but some strange things are happening and I'm not sure why.

First, some of the menu items are in a different text colour than others (in the code below it is those labelled, Home, Calnis, Arabian Nights, and Raptor Retreat).

Second, there's a small block towards the left side of the menu that I want to get rid of. I used a sample of code I copied from the internet and it previously produced a block either side of the menu, I deleted the padding and the right hand side one disappeared, but now I'm left with an unsightly block to one side that is very visible whenever you hover over the Home button.

HTML
<nav>
      <ul>
        <li><a href="../home/home.html">Home</a></li>
        <li><a href="../books/books.html">Books</a>
          <ul>
            <li><a href="../books/cc024.html">Allison's Defeat</a></li>
            <li><a href="../books/emergence.html">Emergence</a></li>
            <li><a href="../books/end_of_the_road.html">End of the Road</a></li>
            <li><a href="../books/elenas_choice.html">Elena's Choice</a></li>
            <li><a href="../books/the_kiss.html">The Kiss</a></li>
            <li><a href="../books/the_bitten.html">The Bitten</a></li>
            <li><a href="../books/disinterment.html">Disinterment</a></li>
          </ul>
        </li>
        <li><a href="../calnis/calnis.html">Calnis</a>
          <ul>
            <li><a href="../calnis/the_chronicles.html">The Chronicles</a></li>
            <li><a href="../calnis/beings.html">Beings</a></li>
            <li><a href="../calnis/characters.html">Characters</a></li>
            <li><a href="../calnis/geography.html">Geography</a></li>
            <li><a href="../calnis/history.html">History</a></li>
            <li><a href="../calnis/languages.html">languages</a></li>
            <li><a href="../calnis/technology.html">Technology</a></li>
          </ul>
        </li>
        <li><a href="../1001/1001.html">Arabian Nights</a>
          <ul>
            <li><a href="../1001/vol_01.html">Scheherazade</a></li>
            <li><a href="../1001/vol_02.html">The Fisherman and the Jinni</a></li>
            <li><a href="../1001/vol_03">The Three Ladies of Baghdad</a></li>
          </ul>
        </li>
        <li><a href="../retreat/retreat.html">Raptor Retreat</a></li>
        <li><a href="../about/about.html">The Author</a></li>
        <li><a href="../blog/blog.html">Blog</a></li>
        <li><a href="../shop/shop.html">Shop</a></li>
      </ul>
    </nav>



CSS

nav ul ul
{
display: none;
}

nav ul li:hover > ul
{
display: block;
}

nav ul
{
background: #4a4a4a; 
/*background: linear-gradient(top, #efefef 0%, #bbbbbb 100%);  
background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%); 
background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%); */
box-shadow: 0px 0px 20px black;
border-radius: 5px;  
list-style: none;
position: relative;
display: inline-table;
}

/*nav ul:after
{
content: "";
clear: both;
display: block;
}*/

nav ul li
{
float: left;
}

nav ul li:hover
{
background: #FFBF29;
/*background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);*/
}

nav ul li:hover a
{
color: white;
text-decoration:none;
}
	
nav ul li a
{
display: block;
padding: 5px 30px;
color: white;
text-decoration: none;
font-family: Garamond, "Times New Roman" serif;
font-weight:bold;
}

nav ul ul
{
background: #5b5b5b;
border-radius: 0px;
padding: 0;
position: absolute;
top: 100%;
}

nav ul ul li
{
float: none; 
position: relative;
}

nav ul ul li a
{
padding: 5px 10px;
color: white;
}	

nav ul ul li a:hover
{
background: #EEAE18;
}

nav ul ul ul
{
position: absolute; left: 100%; top:0;
}

nav
{
position:relative;
top:-60px;
left:10px;
}


Thanks.

This post has been edited by Atharron: 01 August 2014 - 02:48 AM


Is This A Good Question/Topic? 0
  • +

Replies To: weird things happening with my menu...

#2 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3555
  • View blog
  • Posts: 10,335
  • Joined: 08-June 10

Re: weird things happening with my menu...

Posted 01 August 2014 - 03:44 AM

First, some of the menu items are in a different text colour than others

your best bet is to open your dev tools, select the elements concerned and check what styles are applied to them (and where that definition is from.
Was This Post Helpful? 1
  • +
  • -

#3 Atharron  Icon User is offline

  • D.I.C Head

Reputation: 2
  • View blog
  • Posts: 61
  • Joined: 23-April 14

Re: weird things happening with my menu...

Posted 01 August 2014 - 02:21 PM

Thanks. I really ought to be using that thing more often. It turns out the colour change was because of visited <a> code previously in the CSS, and the block to the left was a padding issue. Which was strange because I didn't specify any padding. But the moment I did specify it and set it to 0px, it worked out :huh:
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1