My style.css must be retarded (or I am)

  • Resolved Goodvalley

    (@goodvalley)


    10 years, 9 months ago

    …it’s likely that I am.

    Ok, I’m trying to build a simple dropdown menu with css, nothing more. So it should be a piece of cake.

    I am using the SilverOrchid theme. It has a menu, but I need to add another menu which will have different links for every post. So I want to build a css menu which will be embedded in posts.

    I’m no expert nor programmer, but it’s not exactly my first day with WordPress either.

    Well, I’m simply not able to make the first sentence of the code in the style.css to work.

    For example, in the “text” screen of a post I put this code:

    <div id="my-header">

   <ul class="my-menu">
      <li><a href="">Item 1</a></li>
      <li><a href="">Item 2</a>
         <ul>
            <li><a href="">Item 2-1</a>
               <ul>
                  <li><a href="">Item 2-1-1</a></li>
                  <li><a href="">Item 2-1-2</a></li>
                  <li><a href="">Item 2-1-3</a></li>
                  <li><a href="">Item 2-1-4</a></li>
               </ul>
            </li>
            <li><a href="">Item 2-2</a></li>
            <li><a href="">Item 2-3</a></li>
            <li><a href="">Item 2-4</a></li>
            <li><a href="">Item 2-5</a></li>
         </ul>
         </li>
      <li><a href="">Item 3</a></li>
      <li><a href="">Item 4</a></li>
      <li><a href="">Item 5</a></li>
      <li><a href="">Item 6</a></li>
      <li><a href="">Item 7</a></li>
      <li><a href="">Item 8</a></li>
	</ul>
</div>

    Then I go to the style.css and add the following:

    .my-menu ul {
		list-style:none;
	}

    And it doesn’t work. I’ve changed everything, from “class” to “div”, adding #my-header and so on, and it simply does nothing. Yes, that is a very small piece of code and it should have a lot more. But I can’t solve the issue with the “list-style:none;” in any way.

    Here is the code in the style.css for the menu in my theme:

    #gazpo-nav {
	background:#f6f6f6 url("images/nav-bg.png") repeat-x 0 0;
	border-bottom:2px solid #ccc;
	border-top:1px solid #ececec;
	display: block;
	float: left;
	margin: 0 auto;
	width: 100%;
	position:relative;
	z-index:4;
}

#gazpo-nav .main-menu ul,
div.menu ul {
	list-style: none;
	margin: 0;
	padding-left:0;
	white-space:nowrap;
}

#gazpo-nav .main-menu li,
div.menu li {
    float: left;
    position: relative;
}

#gazpo-nav a {
	color:#737373;
    display: block;
    font-family: 'Droid Sans', sans-serif;
	font-weight: bold;
	text-shadow: 1px 1px 0px #fff;
  	font-size: 16px;
    line-height: 28px;
    margin-top: 1px;
    padding: 6px 20px;
    text-decoration: none;
}
#gazpo-nav .menu ul li.hover,
#gazpo-nav .menu ul li:hover,
#gazpo-nav ul.menu li.hover,
#gazpo-nav ul.menu li:hover {
	position: relative;
	z-index: 599;
	cursor: default;
}
#gazpo-nav ul ul {
 float: left;
    left: 0;
    position: absolute;
	display:none;
    top: 40px;
    width: 180px;
	z-index: 598;
}
#gazpo-nav ul ul li {
	min-width: 180px;
}
#gazpo-nav ul ul ul {
	left: 100%;
	top: 0;
	padding-left:2px;
}

#gazpo-nav ul ul a {
	line-height: 1em;
    padding: 10px;
	width: 180px;
	height: auto;
	margin-bottom:-1px;
	font-size: 14px;
	background: #f9f9f9;
	border-bottom: 1px solid #ddd;
	overflow:hidden;
}

#gazpo-nav ul ul a:hover {
	color: #373737;
}

#gazpo-nav li:hover > a,
#gazpo-nav ul ul :hover > a {
	color: #373737;
}
#gazpo-nav ul li:hover > ul {
	display: block;
}
#gazpo-nav ul li.current_page_item > a,
#gazpo-nav ul li.current-menu-ancestor > a,
#gazpo-nav ul li.current-menu-item > a,
#gazpo-nav ul li.current-menu-parent > a {
	color: #373737;
}
* html #gazpo-nav ul li.current_page_item a,
* html #gazpo-nav ul li.current-menu-ancestor a,
* html #gazpo-nav ul li.current-menu-item a,
* html #gazpo-nav ul li.current-menu-parent a,
* html #gazpo-nav ul li a:hover {
	color: #373737;
}

#gazpo-nav li.submenu>a{
	background: url(images/arrow_down.png) no-repeat 98% 50%;
}

#gazpo-nav li ul li.submenu>a{
	background:#f9f9f9 url(images/arrow_right.png) no-repeat 98% 50%;
}

#gazpo-nav li ul li.submenu>a:hover{
	background:#f9f9f9 url(images/arrow_right.png) no-repeat 98% 50%;
}

    I’ve tried to copy some pieces of the same code above, but nothing works.

    What am I doing wrong?

Viewing 2 replies - 76 through 77 (of 77 total)
  • Thread Starter Goodvalley

    (@goodvalley)

    Ok DMBarber, I will do that inmediately.

    Just a little explanation about the excerpts: if you go to https://www.drumscult.com you’ll see a slider with the image for the post I left opened to public eye, right?

    Under the title, you can read the excerpt, which as you can see consists in the list of titles of the menu which is at the start of the actual post. What should be shown instead of that?

    For example, the excerpts that can be seen at https://www.putrumputrum.com/en which is how it should look. If I open Drumscult to the public now, all the excerpts will consist in the titles of the list at the beginning of every post.

    I hope this make sense, now I’ll close this thread as resolved, thanks a lot!

    I see it now. I apologize. I just “looked” at the overlay without “seeing” the words. Now, with your explanation, I see it. I will look for your new post.

    I am happy that I could help you with your styling!

Viewing 2 replies - 76 through 77 (of 77 total)
  • The topic ‘My style.css must be retarded (or I am)’ is closed to new replies.