<li> problem with arrow

Question

egsonas 2 Newbie Poster

12 Years Ago

Hi,

I have one website and decided to do some changes, for example to use Vertical flyout menu. So, I picked the right one from this page: http://cssmenumaker.com/menu/green-segoe-flyout-menu
Added link Menu CSS file in websites html code. Then wrote desired menu items and problem appeared - an arrow in front of list items (on the left). See image. 0dc48dbfca70f4185d430ca7bb3880ec

As website uses <li> too, I decided, that menu and website CSS files are messing up.

"Example.html" code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Me & Co. - Only for you</title>
<meta name="author" content="www.meandco.com" />
<link rel="stylesheet" href="template_css.css" type="text/css"/>
<link rel="stylesheet" href="menu-styles.css" type="text/css">
</head>
<body>
    <table width="852" border="0" align="center" cellpadding="0" cellspacing="0">
        <tr>
            <td width="1" bgcolor="#666666"></td>
                <td width="850">
                    <div align="center">
                        <table width="850"  border="0" align="center" cellpadding="0" cellspacing="0">
                            <tr>
                                <td height="220" align="center" valign="top" background="images/banner.jpg"></td>
                            </tr>
                            <tr>
                                <td height="28" valign="top" background="images/head-1.png">
                                    <div class="mainlevel-nav"></div>
                                </td>
                            </tr>
                            <tr>
                                <td bgcolor="#CCCCCC">
                                    <table width="100%"  border="0" cellpadding="0" cellspacing="1">
                                        <tr>
                                            <td width="170" valign="top" background="images/leftbar.png">
                                                <div class="leftrow">
                                                    <table cellpadding="0" cellspacing="0" class="moduletable">
                                                        <div id='cssmenu'>
                                                            <ul>         
                                                                <li class='active'><a href='#'><span>1 element</span></a></li>
                                                                <li class='has-sub'><a href='#'><span>2 element</span></a>
                                                                    <ul>
                                                                        <li><a href='#'><span>1 sub element</span></a></li>
                                                                        <li><a href='#'><span>2 sub element</span></a></li>
                                                                        <li><a href='#'><span>3 sub element</span></a></li>
                                                                    </ul>
                                                                </li>
                                                                <li class='has-sub'><a href='#'><span>3 element</span></a>
                                                                    <ul>
                                                                        <li><a href='#'><span>1 sub element</span></a></li>
                                                                        <li><a href='#'><span>2 sub element</span></a></li>
                                                                        <li><a href='#'><span>3 sub element</span></a></li>
                                                                    </ul>
                                                                </li>
                                                                <li class='has-sub'><a href='#'><span>4 element</span></a>
                                                                    <ul>
                                                                        <li><a href='#'><span>1 sub element</span></a></li>
                                                                        <li><a href='#'><span>2 sub element</span></a></li>
                                                                        <li><a href='#'><span>3 sub element</span></a></li>
                                                                    </ul>
                                                                </li>
                                                                <li class='has-sub'><a href='#'><span>5 element</span></a>
                                                                    <ul>
                                                                        <li><a href='#'><span>1 sub element</span></a></li>
                                                                        <li><a href='#'><span>2 sub element</span></a></li>
                                                                        <li><a href='#'><span>3 sub element</span></a></li>
                                                                    </ul>
                                                                </li>
                                                                <li><a href='#'><span>6 element</span></a></li>
                                                                <li class='has-sub'><a href='#'><span>7 element</span></a>
                                                                    <ul>
                                                                        <li><a href="#"><span>1 sub element</span></a></li>
                                                                        <li><a href="#"><span>2 sub element</span></a></li>
                                                                        <li><a href="#"><span>3 sub element</span></a></li>
                                                                    </ul>
                                                                </li>
                                                                <li class='has-sub'><a href='#'><span>8 element</span></a>
                                                                    <ul>
                                                                        <li><a href="#"><span>1 sub element</span></a></li>
                                                                        <li><a href="#"><span>2 sub element</span></a></li>
                                                                        <li><a href="#"><span>3 sub element</span></a></li>
                                                                        <li><a href="#"><span>4 sub element</span></a></li>
                                                                        <li><a href="#"><span>5 sub element</span></a></li>
                                                                    </ul>
                                                                </li>
                                                                <li class='has-sub'><a href='#'><span>9 element</span></a>
                                                                    <ul>
                                                                        <li><a href="#"><span>1 sub element</span></a></li>
                                                                        <li><a href="#"><span>2 sub element</span></a></li>
                                                                        <li><a href="#"><span>3 sub element</span></a></li>
                                                                        <li><a href="#"><span>4 sub element</span></a></li>
                                                                        <li><a href="#"><span>5 sub element</span></a></li>
                                                                        <li><a href="#"><span>6 sub element</span></a></li>
                                                                        <li><a href="#"><span>7 sub element</span></a></li>
                                                                    </ul>
                                                                </li>
                                                                <li class='has-sub'><a href='#'><span>10 element</span></a>
                                                                    <ul>
                                                                        <li><a href='#'><span>1 sub element</span></a></li>
                                                                        <li><a href='#'><span>2 sub element</span></a></li>
                                                                        <li><a href='#'><span>3 sub element</span></a></li>
                                                                        <li><a href='#'><span>4 sub element</span></a></li>
                                                                        <li><a href='#'><span>5 sub element</span></a></li>
                                                                        <li><a href='#'><span>6 sub element</span></a></li>
                                                                        <li><a href='#'><span>7 sub element</span></a></li>
                                                                    </ul>
                                                                </li>
                                                                <li class='has-sub'><a href='#'><span>11 element</span></a>
                                                                    <ul>
                                                                        <li><a href='#'><span>1 sub element</span></a></li>
                                                                        <li><a href='#'><span>2 sub element</span></a></li>
                                                                        <li><a href='#'><span>3 sub element</span></a></li>
                                                                        <li><a href='#'><span>4 sub element</span></a></li>
                                                                    </ul>
                                                                </li>
                                                                <li class='last'><a href='#'><span>12 element</span></a></li>
                                                            </ul>
                                                        </div>
                                                    </table>
                                                    <p>&nbsp;</p>
                                                    <table width="100%" border="0" cellpadding="0" cellspacing="0">
                                                        <tr align="center">
                                                            <td>
                                                                <script>
                                                                    <!-- Here will be calendar code -->
                                                                </script>
                                                            </td>
                                                        </tr>
                                                    </table>
                                                </div>
                                                <table align="center">
                                                    <tr>
                                                        <td align="center">
                                                            <a target="_blank" href=""><img  width=88 height=31 border=0 src="" alt=""></a>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td width="125">
                                                            <a target="_blank" href=""><img src="" width="125" height="71" border="0"  /></a>
                                                        </td>
                                                    </tr>
                                                </table>
                                            </td>
                                            <td valign="top" bgcolor="#F1F1F1">
                                                <h1>TITLE</h1>
                                                <h2>POST TITLE</h2>
                                                <table align="center" width="447" border="0">
                                                    <td width="447">
                                                        <p style="padding-left: 240px;"><i><strong>Words</strong></i></p>
                                                        <p></p>
                                                    </td>
                                                </table>
                                                <div class="aukstyn"><a href="#top">To top</a></div>
                                                <div class="separator"></div>
                                                <p>&nbsp;</p>
                                            </td>
                                        </tr>
                                    </table>
                                </td>
                            </tr>
                            <tr>
                                <td valign="middle" background="images/foot-1.png" height="28">
                                    <div class="mainlevel-nav"></div>
                                </td>
                            </tr>
                            <tr>
                                <td valign="middle" align="center" background="images/bg-2.png" height="30">
                                    <div class="footer">
                                        <div align="center">© <strong>2007-2014</strong></div>
                                        <div align="center"><a href="">Me & Co.</a></div>
                                    </div>
                                </td>
                            </tr>
                        </table>
                    </div>
                </td>
        </tr>
    </table>
</body>
</html>

"menu-styles.css" code:

@charset 'UTF-8';

#cssmenu {
    padding: 0;
    margin: 0;
    border: 0;
}

#cssmenu ul,
#cssmenu li {
    display: block;
    position: relative;
    margin: 0;
    padding: 0;
    width: 100%;
}

#cssmenu ul {
    display: block;
    position: relative;
    z-index: 597;
    float: left;
    width: 100%;
}

#cssmenu ul li {
    float: left;
    /*min-height: 1px;
    line-height: 1.5em;*/
    vertical-align: middle;
    width: 100%;
}

#cssmenu ul li.hover,
#cssmenu ul li:hover {
    position: relative;
    z-index: 599;
    /*cursor: default;*/
}

#cssmenu ul ul {
    visibility: hidden;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 598;
    width: 100%;
}

#cssmenu ul ul li {
    float: none;
}

#cssmenu ul ul,
#cssmenu ul ul ul {
    top: -1px;
    left: 99%;
}

#cssmenu ul li:hover > ul {
    visibility: visible;
}

#cssmenu ul li {
    float: none;
}

#cssmenu a {
    display: block;
}

/* Custom CSS Styles */
#cssmenu {
    font-family: 'Segoe UI', Arial, sans-serif;
    font-size: 11px;
    text-align: left;
}

#cssmenu:after,
#cssmenu ul:after {
    content: '';
    display: block;
    clear: both;
}

#cssmenu ul {
    background: #F0EFEA;
    border: 1px solid #aaaaaa;
    /*padding: 4px;*/
    width: 100%;
}

#cssmenu ul li {
    color: #000000;
    position: relative;
}

#cssmenu ul li.hover,
#cssmenu ul li:hover {
    background: #61b72d;
    background: -moz-linear-gradient(#61b72d 0%, #4b8e23 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #61b72d), color-stop(100%, #4b8e23));
    background: -webkit-linear-gradient(#61b72d 0%, #4b8e23 100%);
    background: linear-gradient(#61b72d 0%, #4b8e23 100%);
    color: #FFF;
}

#cssmenu ul li.hover > a,
#cssmenu ul li:hover > a {
    color: #FFF;
    border: 1px solid #4b8e23;
}

#cssmenu ul ul {
    width: 150px;
}

#cssmenu a {
    border: 1px solid transparent;
    padding: 3px 10px;
}

#cssmenu a:link,
#cssmenu a:visited {
    color: #000000;
    text-decoration: none;
}

#cssmenu a:hover {
    background: #61b72d;
    background: -moz-linear-gradient(#61b72d 0%, #4b8e23 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #61b72d), color-stop(100%, #4b8e23));
    background: -webkit-linear-gradient(#61b72d 0%, #4b8e23 100%);
    background: linear-gradient(#61b72d 0%, #4b8e23 100%);
    color: #FFF;
}

#cssmenu a:active {
    color: #ffa500;
}

#cssmenu .has-sub:hover > a:after,
#cssmenu .has-sub.hover > a:after {
    border-color: transparent transparent transparent #FFF;
}

#cssmenu .has-sub > a:after {
    content: '';
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 4px 0 4px 4px;
    border-color: transparent transparent transparent #808080;
    position: absolute;
    top: 50%;
    right: 5%;
    margin-top: -4px;
    -webkit-transform: rotate(360deg);
}

"template_css.css" code:

body {
    color        : #000000;
    margin-top       : 10px;
    margin-bottom    : 10px;
    padding          : 0px;
    /*background-color : #cccccc;*/
    background-color : #cccccc;
    font-family      : Tahoma, Verdana, arial, sans-serif;
    font-size        : 12px;
}
td, tr, p, div {
    font-family      : Tahoma, Verdana, Arial, Helvetica, sans-serif;
    font-size        : 12px;
    color            : #333333;
}
p {
    font-family      : Tahoma, Verdana, Arial, Helvetica, sans-serif;
    font-size        : 12px;
    color            : #333333;
    margin-left      : 20px;
    margin-right     : 10px;
}
hr {
    color            : #999999;
    height           : 1px;
    width            : 100%;
}
h1 {
    font-family      : Tahoma, Verdana, Arial, Helvetica, sans-serif;
    font-size        : 18px;
    font-weight      : bold;
    color            : #333333;
    margin-top       : 15px;
    margin-bottom    : 20px;
    text-align       : center;
}

h2 {
    font-family      : Tahoma, Verdana, Arial, Helvetica, sans-serif;
    font-size        : 14px;
    font-weight      : bold;
    color            : #333333;
    margin-top       : 20px;
    margin-bottom    : 20px;
    text-align       : center;
}

h3 {
    font-family      : Tahoma, Verdana, Arial, Helvetica, sans-serif;
    font-size        : 12px;
    font-weight      : bold;
    color            : #333333;
    margin-top       : 20px;
    margin-bottom    : 20px;
    text-align       : center;
}

table.moduletable {
    width       : 100%;
    table-layout    : auto;
    border-top  : 1px solid #FFFFFF;
    border-bottom   : 1px solid #999999;
}

table.moduletable th { /* meniu žodis */
    font-size        : 11px;
    font-weight      : bold;
    text-transform   : none;
    text-align       : center;
    height           : 21px;
    line-height      : 21px;
    text-indent      : 4px; /* atsumas meniu žodžio nuo krašto */
    letter-spacing   : 1px; /* atstumai tarp meniu raidžiu */
    color            : #FFFFFF;
    background-image : url(images/bgmenu-1.png);  /* meniu pavadinimo spalva */
}

table.moduletable td {
    padding-left     : 0px;
    padding-right    : 0px;
}

.button {
    font-size        : 11px;
    color            : #333333;
    border           : 1px solid #999999;
    margin-bottom    : 5px;
    background-color : #EDEDED;
    padding          : 1px;
}

a.mainlevel  {
    margin           : 0px;
    padding          : 0px;
    font-size        : 12px;
    width            : 170px;
    background-color : #ECEAD8;
    text-indent      : 10px;
}

a.mainlevel: link {
    padding          : 0px 0px 0px 0px;
    font-size        : 12px;
    width            : 170px;
    background-color : #DD763F;
    text-indent      : 10px;
}

a.mainlevel:link, a.mainlevel:visited {
    display          : block;
    font-size        : 12px;
    border-top       : 1px solid #ffffff;
    border-bottom    : 1px solid #999999;
    background-color : #99CCFF; /* meniu neužvedus */
    font-weight      : normal;
    padding          : 2px 0px 2px 0px;
    color            : #333333;
    width            : 170px;
    text-indent      : 10px;
}

a.mainlevel:hover {
    background-color : #88BFF7; /* meniu užvedus */
    font-size        : 12px;
    font-weight      : bold;
    text-decoration  : none;
    text-indent      : 10px;
}

#active_menu {
    color            : #333333;
    background-color : #DD763F;
    font-weight      : bold;
}

a#active_menu:hover {
    color            : #333333;
}

a:link, a:visited {
    font-size        : 11px;
    color            : #6699CC; /* linko spalva */
    text-decoration  : none;
    font-weight      : bold;
}

a:hover {
    font-size        : 11px;
    color            : #333333;
    text-decoration  : none;
    font-weight      : bold;
}

a.category:link, a.category:visited {
    font-size        : 11px;
    font-weight      : bold;
}

ul {
    margin           : 2px;
    padding          : 0px;
    list-style       : none;
}

li {
    line-height      : 15px; /* tarpas tarp eiluciu */
    padding-left     : 20px;
    padding-top      : 0px;
    background-image : url(images/arrow3.png);
    background-repeat : no-repeat;
    background-position : 0px 3px;
}

.footer {
    font-family      : Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif;
    color            : #FFFFFF;
    font-size        : 10px;
    font-weight      : normal;
}

.footer a:link, .footer a:visited {
    font-size        : 11px;
    color            : #FFFFFF;
    text-decoration  : none;
    font-weight      : bold;
}

.footer a:hover {
    font-size        : 11px;
    color            : #333333;
    text-decoration  : none;
    font-weight      : bold;
}

.contact_email  {
    width            : 100%;
}

.contact_email .inputbox {
    width            : 345px;
}

.separator {
    border-bottom   : 1px dashed #666;
    margin-left : 10px;
    margin-right    : 10px;
    padding     : 1px 0 0;
}

.aukstyn {
    font-family      : Tahoma, Verdana, Arial, Helvetica, sans-serif;
    font-size        : 11px;
    margin-left      : 10px;
    margin-right     : 10px;
    text-align       : right;
    padding      : 0 0 10px;
}

.update_time {
    font-family      : Tahoma, Verdana, Arial, Helvetica, sans-serif;
    font-size        : 11px;
    font-style   : italic;
    margin-left      : 10px;
    margin-right     : 10px;
    text-align   : right;
    color            : #666;
    padding      : 10px 0 0;
}

May your attention, please!
For code writing I use Notepad++, so in this program codes indentation is perfect, but if you use ordinary Notepad it could be a little bit messy. Sorry for that.
Also, I can send a whole site folder in P.M., if needed (with images).

I will be grateful for your help.

html-css web-design

4 Contributors
9 Replies
307 Views
1 Week Discussion Span
Latest Post 12 Years Ago Latest Post by Faith_2

RikTelner commented: Nicely written code. I thought I was the only one. +2

Dani AI

Generated 9 Months Ago

The black arrow is coming from your site’s global li styling (the arrow3.png background) — so every <li> on the page, including the menu’s, inherits it. discovered the image, showed the menu works in isolation, and correctly pointed at the global ul/li rules. This is a classic cascade/specificity problem: either stop the global rule from targeting the menu, or explicitly override it for #cssmenu.

Two practical fixes (best → quick):

Best / long-term: stop styling every li. Edit your template CSS so only lists that need the arrow get it (add a class for “bulleted” lists and target .bulleted li). Then change the relevant markup to <ul class="bulleted">…</ul>. That keeps global element selectors from unintentionally styling widgets like the flyout menu.
Quick override (add to the end of menu-styles.css):

#cssmenu li {
  background-image: none;
  list-style: none;
  padding-left: 0;
}

If the arrow still appears, increase specificity or (as last resort) use background-image: none !important; and padding-left: 0 !important; — but prefer scoped selectors over !important.

Extra notes: commenting out the global li rules (as suggested earlier) will fix the symptom but may break other lists site-wide. Consider using list-style-image or :before pseudo-elements for content icons instead of global background images. Finally, keep the menu stylesheet loaded after the template stylesheet and ensure the menu CSS explicitly clears properties the template set.

All 9 Replies

patk570 42 Newbie Poster

12 Years Ago

I just looked at it on my side, and its working like you want, here is a screenshot

egsonas commented: Hmmm.... Starnge. have you any changes to code or just putted codes in separate files? +1

k99rs 9 Newbie Poster

12 Years Ago

Can you try the follow css for your ul li childrens and see if it helps.

list-style-type:none;

k99rs 9 Newbie Poster

12 Years Ago

Can you send the images? So i can test it out and see how it works

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

Hmmm.... Starnge. have you any changes to code or just putted codes in separate files?

egsonas 2 Newbie Poster · Answer 1 · 2014-03-19T14:15:50+00:00

Well, I putted these codes in fresh files "html" and "css", and yes, they worked fine as you said. But when I created a folder named "images", dropped some "png" and "jpg" pictures, problem appeared again.
Looked clearly and found, tha this black arrow is "arrow3.png" file from "images" folder. I used it in text bulleting, but I don't want to use it in menu, but we know, that menu items uses <ul> and <li>, so they grab this image. How to separate them? Or another way to bullet text?

egsonas 2 Newbie Poster · Answer 2 · 2014-03-20T06:58:55+00:00

Nope, it doesn't work.
The decision that I found so far is - to do some manipulation changes in "template_css.css":

line 161. padding : 1 0px 0;
line 162. list-style : disc; (for default cursor)

line 167. padding-left : 0px;

Deleted this part:
line 169. background-image : url(images/arrow3.png);
line 170. background-repeat : no-repeat;
line 171. background-position : 0px 3px;

patk570 42 Newbie Poster · Answer 3 · 2014-03-20T16:30:31+00:00

This might not be much, but you seem to have the ul, li tags defined twice in your css. What order do you have the css link scripts in?

on your template_css.css file try and comment out this:

ul {
margin : 2px;
padding : 0px;
list-style : none;
}
li {
line-height : 15px; /* tarpas tarp eiluciu */
padding-left : 20px;
padding-top : 0px;
background-image : url(images/arrow3.png);
background-repeat : no-repeat;
background-position : 0px 3px;
}

and see what happens.

egsonas 2 Newbie Poster · Answer 4 · 2014-03-21T08:26:53+00:00

k99rs, can you write me a personal message with your e-mail?, because I can't attach "rar" with website files in PM and here (making reply). It makes me sad.

k99rs 9 Newbie Poster · Answer 5 · 2014-03-30T20:56:53+00:00

Your problem is arise because of the UL and li definitions in your template_css.css file.

Remove this definition and it should work..

Faith_2 0 Newbie Poster · Answer 6 · 2014-03-31T09:05:39+00:00

the cascading rules will help u hear & also check browser support for some tags

<li> problem with arrow

Dani AI

Recommended Answers Collapse Answers

All 9 Replies

Recommended Answers