0 Replies - 801 Views - Last Post: 11 August 2014 - 11:18 AM

#1 Atharron   User is offline

  • D.I.C Head

Reputation: 3
  • View blog
  • Posts: 171
  • Joined: 23-April 14

Having problems with a vertical menu

Posted 11 August 2014 - 11:18 AM

I have a complicated menu with potentially many items in it, and I wish for it to be positioned at the side, I've meddled with the CSS of another menu I created (a horizontal one) and I managed to get a successful one from it. Except that all the sub menus appear at the same height no matter where you are in the main menu. This causes a problem when trying to reach a small sub menu from the bottom of the main one; in order to get there, you need to move the mouse out of the area of effect which then closes the menu. Rather frustrating and leading to links that cannot be clicked on. Here's my CSS:-

.navSide ul ul {
	display: none;
}

.navSide ul li:hover > ul {
	display: block;
	background-color: rgba(0, 0, 0, 0.0);
}

.navSide ul {
	list-style: none;
	position: relative;
	display: inline-table;
	background: black;
	box-shadow: 0px 0px 20px black;
	border-radius: 5px;
	padding: 0px 0px;
}

.navSide ul li{
	background: -webkit-radial-gradient(#7D7D7D, #171717, #000000);/*For Safari 5.1 to 6.0*/
	background: -o-radial-gradient(#7D7D7D, #171717, #000000);/*For Opera 11.6 to 12*/
	background: -moz-radial-gradient(#7D7D7D, #171717, #000000);/*For Firefox 3.6 to 15.0*/
	background: radial-gradient(#7D7D7D, #171717, #000000);/*Standard syntax*/
	border-radius: 5px;
}

.navSide ul li a:visited {
	color: white;
}

.navSide ul li a:hover {
	background: -webkit-radial-gradient(#FFBF29, #171717, #000000);/*For Safari 5.1 to 6.0*/
	background: -o-radial-gradient(#FFBF29, #171717, #000000);/*For Opera 11.6 to 12.0*/
	background: -moz-radial-gradient(#FFBF29, #171717, #000000);/*For Firefox 3.6 to 15.0*/
	background: radial-gradient(#FFBF29, #171717, #000000);/*Standard syntax*/
	color: #FFFFFF;
	text-decoration: none;
}

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

.navSide ul ul {
	position: absolute;
	left: 100%;
	top: 0;
	border-radius: 5px;
	padding: 0;
	box-shadow: 10px 10px 20px black;
}

.navSide ul ul li {
	float: none;
	position: relative;
}

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

.navSide ul ul li a:hover {
	background: -webkit-radial-gradient(#FFBF29, #171717, #000000);/*For Safari 5.1 to 6.0*/
	background: -o-radial-gradient(#FFBF29, #171717, #000000);/*For Opera 11.6 to 12.0*/
	background: -moz-radial-gradient(#FFBF29, #171717, #000000);/*For Firefox 3.6 to 15.0*/
	background: radial-gradient(#FFBF29, #171717, #000000);/*Standard syntax*/
	border-radius: 5px;
	color: #FFFFFF;
}

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

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


And the HTML

<div class="navSide">
  <ul>
    <li><a href="../calnis/cott01/01">The Chronicles</a>
      <ul>
        <li><a href="../calnis/cott01/01">Allison's Defeat</a></li>
        <li><a href="../calnis/cott01/01">Elena's Choice</a></li>
        <li><a href="../calnis/cott01/01">Mathew's Victory</a></li>
        <li><a href="../calnis/cott01/01">Chronicles of the Tarimain</a>
          <ul>
            <li><a href="../calnis/cott01/01">Volume I: Emergence</a>
              <ul>
                <li><a href="../calnis/cott01/01">Mortality</a></li>
                <li><a href="../calnis/cott01/01">Eternity</a></li>
                <li><a href="../calnis/cott01/01">War of the Dead</a></li>
                <li><a href="../calnis/cott01/01">Girl Corrupted</a></li>
                <li><a href="../calnis/cott01/01">Blood</a></li>
                <li><a href="../calnis/cott01/01">The Knives of Calnis</a></li>
                <li><a href="../calnis/cott01/01">Friend or Foe</a></li>
                <li><a href="../calnis/cott01/01">Evolution</a></li>
                <li><a href="../calnis/cott01/01">Chimera</a></li>
                <li><a href="../calnis/cott01/01">The Doom of Reality</a></li>
              </ul>
            </li>
            <li><a href="../calnis/cott01/01">Volume II: Disinterment</a>
              <ul>
                <li><a href="../calnis/cott01/01">The Master Race</a></li>
                <li><a href="../calnis/cott01/01">Forgotten</a></li>
                <li><a href="../calnis/cott01/01">Good Evil</a></li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </li>
    <li><a href="../calnis/cott01/01">Beings</a>
      <ul>
        <li><a href="../calnis/cott01/01">Creatures</a></li>
        <li><a href="../calnis/cott01/01">Divine Spirits</a></li>
        <li><a href="../calnis/cott01/01">Enhanced Beings</a></li>
        <li><a href="../calnis/cott01/01">Extra-terrestrial</a></li>
        <li><a href="../calnis/cott01/01">Supernatural</a></li>
      </ul>
    </li>
    <li><a href="../calnis/cott01/01">Characters</a>
      <ul>
        <li><a href="../calnis/cott01/01">Angels</a></li>
        <li><a href="../calnis/cott01/01">Demons</a></li>
        <li><a href="../calnis/cott01/01">Humans</a></li>
        <li><a href="../calnis/cott01/01">Non-Humans</a></li>
        <li><a href="../calnis/cott01/01">Tarimain</a></li>
        <li><a href="../calnis/cott01/01">Other</a></li>
      </ul>
    </li>
    <li><a href="../calnis/cott01/01">Geography</a>
      <ul>
        <li><a href="../calnis/cott01/01">Calnis</a></li>
        <li><a href="../calnis/cott01/01">Niflheim</a></li>
      </ul>
    </li>
    <li><a href="../calnis/cott01/01">History</a>
      <ul>
        <li><a href="../calnis/cott01/01">Pre-history</a></li>
        <li><a href="../calnis/cott01/01">The Founding of Calnis</a></li>
        <li><a href="../calnis/cott01/01">Golden Age of Calnis</a></li>
        <li><a href="../calnis/cott01/01">The Fall of Calnis</a></li>
        <li><a href="../calnis/cott01/01">The Forgotten War</a></li>
        <li><a href="../calnis/cott01/01">The Rise of the Tarimain</a></li>
        <li><a href="../calnis/cott01/01">The Third War</a></li>
      </ul>
    </li>
    <li><a href="../calnis/cott01/01">Languages</a>
      <ul>
        <li><a href="../calnis/cott01/01">Afirian</a></li>
        <li><a href="../calnis/cott01/01">Calnissian</a></li>
        <li><a href="../calnis/cott01/01">Jinn</a></li>
        <li><a href="../calnis/cott01/01">Nosfirian</a></li>
      </ul>
    </li>
    <li><a href="../calnis/cott01/01">Technology</a>
      <ul>
        <li><a href="../calnis/cott01/01">The Knives of Calnis</a></li>
        <li><a href="../calnis/cott01/01">Early Days of Calnis</a></li>
        <li><a href="../calnis/cott01/01">Later Days of Calnis</a></li>
      </ul>
    </li>
  </ul>
</div>


And for context, here's the rest of the CSS, just in case you spot something that may have made a difference elsewhere in the code:-

/*NOTES
COLOUR SCHEMES

Calnis grey
    rgb(74, 74, 74)
    hsl(0, 0, 29/31?)
    CMYK(66, 59, 57, 39)
    #4A4A4A

Calnis Yellow
    rgb(255, 191, 41)
    hsl(42, 84, 100/82?)
    CMYK(0, 27, 93, 9)
    #FFBF29
*/

/*MAIN PAGES*/

body {
	background-image: url("../images/background.jpg");
}

/*Text*/

h1, h2, h3, h4, h5, h6 {
	color: #FFBF29;
	font-family: Garamond, "Times New Roman", serif;
	padding: 5px;
	margin: 0px;
}

h1 {
	font-size: 3em;
}

h2 {
	font-size: 2em;
}

h3 {
	font-size: 1.75em;
}

h4 {
	font-size: 1.5em;
}

h5 {
	font-size: 1.25em;
}

h6 {
	font-size: 1.0em;
}

p {
	color: white;
	font-family: Arial, sans-serif;
	margin: 0px;
	padding: 5px;
	text-align: justify;
}

p.pSmall {
	font-size: 0.75em;
}

/*Language Formatting*/

.langText {
	font-weight: bold;
}

.langDef {
	font-style: italic;
}

.langEtym {
	font-variant: small-caps;
}

/*Links*/

a {
	color: #FFCF39;
	text-decoration: underline;
}

a:hover {
	color: #4A4A4A;
	text-decoration: underline;
}

a:active {
	color: #6C6C6C;
	text-decoration: none;
}

a:visited {
	color: #D09000;
	text-decoration: underline;
}

a.hidden {
	color: white;
	text-decoration: none;
}

a img {
	text-decoration: none;
}

iframe {
	width: 100%;
	height: 100%;
	border: 0px;
}

/*DIVISIONS*/

#divHeader {
	background: -webkit-linear-gradient(#4A4A4A, #000000); /*For Safari 5.1 to 6.0*/
	background: -o-linear-gradient(#4A4A4A, #000000); /*For Opera 11.1 to 12.0*/
	background: -moz-linear-gradient(#4A4A4A, #000000); /*For Firefox 3.6 to 15.0*/
	background: linear-gradient(#4A4A4A, #000000); /*Standard syntax*/
	border: 3px solid black;
	position: fixed;
	width: 80%;
	height: 200px;
	top: 0%;
	left: 10%;
	z-index: 4;
}

#divSocial {
	background-color: rgba(255, 255, 255, 0.5);
	position: absolute;
	width: 135px;
	height: 30px;
	top: 120px;
	left: 370px;
}

#divFacebook {
	position: relative;
	top: 5px;
}

#divTwitter {
	position: relative;
	top: -130px;
}

#divHeadline {
	padding-left: 20px;
	position: absolute;
	width: 400px;
	top: 20px;
	right: 0px;
}

#divHeadlineImg {
	position: absolute;
	width: 75px;
	top: 0px;
	right: 100px;
	padding: 0px;
}

#divBody {
	background-color: rgba(0, 0, 0, 0.5);
	border: 3px solid black;
	position: relative;
	width: 80%;
	height: 2000px;
	top: 220px;
	left: 10%;
	z-index: 1;
}

#divSide {
	background-color: rgba(255, 255, 255, 0.5);
	border: 3px solid black;
	position: relative;
	width: 20%;
	height: 1940px;
	top: 20px;
	left: 20px;
	z-index: 3;
}

#divMain {
	position: relative;
	width: 75%;
	height: 1940px;
	top: -1920px;
	right: -240px;
	z-index: 2;
}

#divFooter {
	background-color: rgba(0, 0, 0, 0.5);
	border: 3px solid black;
	position: relative;
	width: 80%;
	height: 100px;
	top: 240px;
	left: 10%;
}

#divBottom {
	background-color: rgba(0, 0, 0, 0.0);
	position: relative;
	width: 80%;
	height: 10px;
	top: 250px;
	left: 10%;
}

/*NAVIGATION*/

nav ul ul {
	display: none;
}

nav ul li:hover > ul {
	background-color: rgba(0, 0, 0, 0.0);
	display: block;
}

nav ul {
	background: black;
	box-shadow: 0px 0px 20px black;
	border-radius: 5px;
	list-style: none;
	position: relative;
	display: inline-table;
	padding: 0px 0px;
}

nav ul li {
	background: -webkit-radial-gradient(#7D7D7D, #171717, #000000);/*For Safari 5.1 to 6.0*/
	background: -o-radial-gradient(#7D7D7D, #171717, #000000);/*For Opera 11.6 to 12*/
	background: -moz-radial-gradient(#7D7D7D, #171717, #000000);/*For Firefox 3.6 to 15.0*/
	background: radial-gradient(#7D7D7D, #171717, #000000);/*Standard syntax*/
	border-radius: 5px;
	float: left;
}

nav ul li a:visited {
	color: white;
}

nav ul li a:hover {
	background: -webkit-radial-gradient(#FFBF29, #171717, #000000);/*For Safari 5.1 to 6.0*/
	background: -o-radial-gradient(#FFBF29, #171717, #000000);/*For Opera 11.6 to 12.0*/
	background: -moz-radial-gradient(#FFBF29, #171717, #000000);/*For Firefox 3.6 to 15.0*/
	background: radial-gradient(#FFBF29, #171717, #000000);/*Standard syntax*/
	color: #FFFFFF;
	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 {
	border-radius: 5px;
	padding: 0;
	position: absolute;
	top: 100%;
	box-shadow: 10px 10px 20px black;
}

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: -webkit-radial-gradient(#FFBF29, #171717, #000000);/*For Safari 5.1 to 6.0*/
	background: -o-radial-gradient(#FFBF29, #171717, #000000);/*For Opera 11.6 to 12.0*/
	background: -moz-radial-gradient(#FFBF29, #171717, #000000);/*For Firefox 3.6 to 15.0*/
	background: radial-gradient(#FFBF29, #171717, #000000);/*Standard syntax*/
	border-radius: 5px;
	color: #FFFFFF;
}

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

nav {
	position: relative;
	top: -210px;
	left: 30px;
}

li.navOn {
	background: -webkit-radial-gradient(#FFBF29, #171717, #000000);/*For Safari 5.1 to 6.0*/
	background: -o-radial-gradient(#FFBF29, #171717, #000000);/*For Opera 11.6 to 12.0*/
	background: -moz-radial-gradient(#FFBF29, #171717, #000000);/*For Firefox 3.6 to 15.0*/
	background: radial-gradient(#FFBF29, #171717, #000000);/*Standard syntax*/
}

.navSide ul ul {
	display: none;
}

.navSide ul li:hover > ul {
	display: block;
	background-color: rgba(0, 0, 0, 0.0);
}

.navSide ul {
	list-style: none;
	position: relative;
	display: inline-table;
	background: black;
	box-shadow: 0px 0px 20px black;
	border-radius: 5px;
	padding: 0px 0px;
}

.navSide ul li{
	background: -webkit-radial-gradient(#7D7D7D, #171717, #000000);/*For Safari 5.1 to 6.0*/
	background: -o-radial-gradient(#7D7D7D, #171717, #000000);/*For Opera 11.6 to 12*/
	background: -moz-radial-gradient(#7D7D7D, #171717, #000000);/*For Firefox 3.6 to 15.0*/
	background: radial-gradient(#7D7D7D, #171717, #000000);/*Standard syntax*/
	border-radius: 5px;
}

.navSide ul li a:visited {
	color: white;
}

.navSide ul li a:hover {
	background: -webkit-radial-gradient(#FFBF29, #171717, #000000);/*For Safari 5.1 to 6.0*/
	background: -o-radial-gradient(#FFBF29, #171717, #000000);/*For Opera 11.6 to 12.0*/
	background: -moz-radial-gradient(#FFBF29, #171717, #000000);/*For Firefox 3.6 to 15.0*/
	background: radial-gradient(#FFBF29, #171717, #000000);/*Standard syntax*/
	color: #FFFFFF;
	text-decoration: none;
}

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

.navSide ul ul {
	position: absolute;
	left: 100%;
	top: 0;
	border-radius: 5px;
	padding: 0;
	box-shadow: 10px 10px 20px black;
}

.navSide ul ul li {
	float: none;
	position: relative;
}

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

.navSide ul ul li a:hover {
	background: -webkit-radial-gradient(#FFBF29, #171717, #000000);/*For Safari 5.1 to 6.0*/
	background: -o-radial-gradient(#FFBF29, #171717, #000000);/*For Opera 11.6 to 12.0*/
	background: -moz-radial-gradient(#FFBF29, #171717, #000000);/*For Firefox 3.6 to 15.0*/
	background: radial-gradient(#FFBF29, #171717, #000000);/*Standard syntax*/
	border-radius: 5px;
	color: #FFFFFF;
}

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

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

/*IMAGES*/

#imgLogo {
	height: 130px;
	position: relative;
	top: 20px;
	left: 20px;
}

#imgAuthor {
	height: 130px;
	position: relative;
	top: 20px;
	left: 40px;
}

.imgSocial {
	width: 20px;
	margin: 5px;
}

#imgHeadline img {
	width: 75px;
	padding: 0px;
}

.imgThumbnail {
	width: 75px;
	padding: 1px;
	border: 5px outset #505050;
	box-shadow: 10px 10px 15px 0px #000000;
}

.imgThumbnail:hover {
	border: 5px outset #A0A0A0;
}

.imgThumbnail:active {
	border: 5px inset #A0A0A0;
}

/*FORMS*/

#frmNewsletter {
	position: relative;
	top: -120px;
	left: 370px;
}

/*FRONT PAGE*/

#indFront {
	text-align: center;
}

h1.intro {
	text-align: center;
	color: white;
	font-family: Garamond, "Times New Roman", serif;
}

#divFront {
	position: relative;
	top: 100px;
	vertical-align: middle;
}

.frontPic {
	height: 150px;
	border: 5px outset #505050;
	margin: 5px;
	text-align: center;
	box-shadow: 10px 10px 15px 0px #000000;
}

.frontPic:hover {
	border: 5px outset #A0A0A0;
}

.frontPic:active {
	border: 5px inset #A0A0A0;
}


Is This A Good Question/Topic? 0
  • +

Page 1 of 1