Search code examples
jquerycssmenu

jQuery menu is displaying its childs on its left instead that on its right

I have a simple page in which I have a jQuery menu with a few childs. The menu is aligned on the left of the page, contained in the second td of a tr. The menu is working, but it's displaying its kids on the left instead than the default setting right. I used a custom css for jQuery, to fit well in my page: I browsed it but couldn't find any right left option! I only found that it had different styles for left and right menus, so there must be an option to modify the direction, but I didn't find how to set that option. Can anyone help?

This is the website if my words weren't clear: http://www.copot.eu/matei/assets

Here is the code:

<html>
    <head>
        <title>Assets | Cicada3301's Website</title>
     <link rel='stylesheet' type='text/css' href='http://www.copot.eu/matei/assets/stylesheet.css'>
  <link rel='stylesheet' href='http://www.copot.eu/matei/assets/jquery-ui-stylesheet.css'>
  <script  type="text/javascript" src="http://www.copot.eu/matei/assets/jquery-1.10.2.min.js"></script>
  <script src="http://www.copot.eu/matei/assets/jquery-ui.js"></script>
    <script type="text/javascript" src="http://www.copot.eu/matei/assets/scripts.js"></script>
    <link rel='shortcut icon' type='image/x-icon' href='http://www.copot.eu/matei/assets/me.jpg'>
    </head>
    <body>
            <ul id='menu'>
                <li><a href='#'>Images</a>
                <ul>
                    <li><a href='#'><a href='me.jpg'>me.jpg</a></li>
                    <li><a href='#'><a href='cheese.jpg'>cheese.jpg</a></li>
                </ul>
                </li>
                <li><a href='#'>Stylesheets</a>
                    <ul>
                        <li><a href='#'><a href='stylesheet.css'>stylesheet.css</a></li>
                        <li><a href='#'><a href='jquery-ui-stylesheet.css'>jquery-ui-stylesheet.css</a></li>
                    </ul>
                </li><li><a href='#'>Scripts</a>
                    <ul>
                        <li><a href='#'><a href='scripts.js'>scripts.js</a></li>
                        <li><a href='#'><a href='jquery-1.10.2.min.js'>jquery-1.10.2.min.js</a></li>
                        <li><a href='#'><a href='jquery-ui.js'>jquery-ui</a></li>
                    </ul>
                </li><li><a href='#'>Fonts</a>
                    <ul>
                        <li><a href='#'><a href='Computerfont.ttf'>Computerfont.ttf</a></li>
                    </ul>
                </li>

            </ul>
    </body>
</html>

` And here is the css:

http://www.copot.eu/matei/assets/jquery-ui-stylesheet.css Sorry.. it was too long to put it in the body

Solution

  • CSS

    Changed width to 14% instead of 100%.

     .ui-menu .ui-menu-item {
       width: 14%;
 }